<template>
  <div class="map" ref="map"></div>
</template>

<script lang="ts" setup>
import Api from '@/apis/map'
import { onMounted, ref } from 'vue'
import myaxios from '@/utils/request'
import * as echarts from 'echarts'
onMounted(async () => {
  await getmap()
  let myChart = echarts.init(map.value)
  myChart.setOption(mapOption)
})
const map = ref(null)
const mapOption = {
  series: [
    {
      type: 'map',
      map: 'China',
      top: 120,
      roam: true,
      zoom: 1.6,
      label: {
        show: true,
        color: 'white',
        fontSize: 12
      },
      itemStyle: {
        borderColor: '#333',
        areaColor: {
          //渐变
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'green' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'blue' // 100% 处的颜色
            }
          ]
        },
        opacity: 0.8
      }
    }
  ]
}
const getmap = async () => {
  const api = Api.getMap
  const res = await myaxios(api.url, api.method)
  console.log(res.data)
  echarts.registerMap('China', res.data)
}
</script>

<style scoped>
.map {
  width: 600px;
  height: 445px;
}
</style>
